<template>
  <Header1></Header1>
  <div class="ol_body">
    <div ref="mapEl" id="mapDiv" class="map">
      <div
        v-if="isWipe"
        ref="sliderEl"
        id="swipeContainer"
        :style="{ left: left + 'px' }"
        class="slider"
        @mousedown="onMouseDown"
      >
        <div id="swipeDiv" @mousedown="onMouseDown">
          <div class="handle"></div>
        </div>
      </div>
    </div>
    <div class="left_top"></div>
    <div class="left_bottom"></div>
    <div class="right_top"></div>
    <div class="right_bottom"></div>
    <div class="left_info"></div>
    <div class="right_info"></div>
    <div class="btm_info">
      <div id="mouse-position"></div>
    </div>
    <!-- <div class="r_nav">
      <div class="item" :class="showNav === 1 ? 'active' : ''" @click="clickNav(1)">
        数据面板
      </div>
      <div class="item" :class="showNav === 2 ? 'active' : ''" @click="clickNav(2)">
        功能菜单
      </div>
      <div class="item" :class="showNav === 3 ? 'active' : ''" @click="clickNav(3)">
        专题图层
      </div>
    </div> -->
    <!-- <div class="shade_box animate__animated animate__fadeIn" v-if="showNav !== 0 && showNav !== 1">
      <div class="con" v-if="showNav === 2">
        <div class="item">
          <div class="title">常用功能</div>
          <div class="box">
            <div class="box_i" @click="clickTool(3)">
              <div class="img"><img src="/static/icon/nav02.png" /></div>
              <span>图层管理</span>
            </div>
            <div class="box_i" @click="clickTool(2)">
              <div class="img"><img src="/static/icon/nav03.png" /></div>
              <span>绘图</span>
            </div>
            <div class="box_i" @click="clickTool(1)">
              <div class="img"><img src="/static/icon/nav04.png" /></div>
              <span>测量</span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">查询分析</div>
          <div class="box">
            <div class="box_i" @click="clickTool('快速查询')">
              <div class="img"><img src="/static/icon/nav06.png" /></div>
              <span>快速查询</span>
            </div>
            <div class="box_i" @click="clickTool('爆管分析')">
              <div class="img"><img src="/static/icon/icon02.png" /></div>
              <span>爆管分析</span>
            </div>
            <div class="box_i" @click="clickTool('管线老化分析')">
              <div class="img"><img src="/static/icon/nav16.png" /></div>
              <span>管线老化分析</span>
            </div>
          </div>
        </div>
      </div>
      <div class="con" v-else-if="showNav === 3">
        <div class="item">
          <div class="title">场景切换</div>
          <div class="box">
            <div class="box_i" @click="changeUnderlay(3)">
              <div class="img" :class="underlayValue === 3 ? 'underlay_active' : ''">
                <img src="/static/icon/nav11.png" />
              </div>
              <span>专题图层</span>
            </div>
            <div class="box_i" @click="changeUnderlay(1)">
              <div class="img" :class="underlayValue === 1 ? 'underlay_active' : ''">
                <img src="/static/icon/nav12.png" />
              </div>
              <span>影像图层</span>
            </div>
            <div class="box_i" @click="changeUnderlay(2)">
              <div class="img" :class="underlayValue === 2 ? 'underlay_active' : ''">
                <img src="/static/icon/nav11.png" />
              </div>
              <span>标准图层</span>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
  <div ref="popupCom" class="popup">
    <div class="popupCom-top">
      <span class="popupCom-top_title" v-if="wmsInfo.start_point"
        >{{ wmsInfo.start_point?.slice(0, 5) }} --
        {{ wmsInfo.end_point?.slice(0, 5) }}</span
      >
      <span class="popupCom-top_title" v-else-if="wmsInfo.tsdh">{{
        wmsInfo.tsdh?.slice(0, 5)
      }}</span>
      <span class="popupCom-top_close" @click="closePopup">✖</span>
    </div>
    <div class="popupCom-con">
      <div class="fl">
        <table width="100%" height="100%" v-if="wmsInfo.start_point">
          <tbody>
            <tr>
              <td width="90px">工程号:</td>
              <td>{{ wmsInfo.gch }}</td>
            </tr>
            <tr>
              <td width="90px">管线大类:</td>
              <td>{{ wmsInfo.type }}</td>
            </tr>
            <tr>
              <td width="90px">管线子类:</td>
              <td>{{ wmsInfo.c_type }}</td>
            </tr>
            <tr>
              <td width="90px">建设日期:</td>
              <td>{{ wmsInfo.js_date }}</td>
            </tr>
            <tr>
              <td width="90px">管径:</td>
              <td>{{ wmsInfo.gj }}</td>
            </tr>
            <tr>
              <td width="90px">起点号:</td>
              <td>{{ wmsInfo.start_point }}</td>
            </tr>
            <tr>
              <td width="90px">终点号:</td>
              <td>{{ wmsInfo.end_point }}</td>
            </tr>
            <tr>
              <td width="90px">起点埋深:</td>
              <td>{{ wmsInfo.start_ms }} m</td>
            </tr>
            <tr>
              <td width="90px">终点埋深:</td>
              <td>{{ wmsInfo.end_ms }} m</td>
            </tr>
            <tr>
              <td width="90px">起点高程:</td>
              <td>{{ wmsInfo.start_gc }} m</td>
            </tr>
            <tr>
              <td width="90px">终点高程:</td>
              <td>{{ wmsInfo.end_gc }} m</td>
            </tr>
            <tr>
              <td width="90px">管线材料:</td>
              <td>{{ wmsInfo.gx_cz }}</td>
            </tr>
            <tr>
              <td width="90px">埋设方式:</td>
              <td>{{ wmsInfo.ms_type }}</td>
            </tr>
            <tr>
              <td width="90px">管线压力:</td>
              <td>{{ wmsInfo.gx_yl }}</td>
            </tr>
            <tr>
              <td width="90px">更新时间:</td>
              <td>{{ wmsInfo.up_time }}</td>
            </tr>
            <tr>
              <td width="90px">创建时间:</td>
              <td>{{ wmsInfo.js_date }}</td>
            </tr>
          </tbody>
        </table>
        <table width="100%" height="100%" v-if="wmsInfo.tsdh">
          <tbody>
            <tr>
              <td width="70px">图上点号:</td>
              <td>{{ wmsInfo.tsdh }}</td>
            </tr>
            <tr>
              <td width="70px">测量点号:</td>
              <td>{{ wmsInfo.cldh }}</td>
            </tr>
            <tr>
              <td width="70px">工程号:</td>
              <td>{{ wmsInfo.gch }}</td>
            </tr>
            <tr>
              <td width="70px">管线类型:</td>
              <td>{{ wmsInfo.type }}</td>
            </tr>
            <tr>
              <td width="70px">管点子类型:</td>
              <td>{{ wmsInfo.c_type }}</td>
            </tr>
            <tr>
              <td width="70px">建设日期:</td>
              <td>{{ wmsInfo.js_date }}</td>
            </tr>
            <tr>
              <td width="70px">埋深:</td>
              <td>{{ wmsInfo.ms }} m</td>
            </tr>
            <tr>
              <td width="70px">管径/断面尺寸:</td>
              <td>{{ wmsInfo.cc }}</td>
            </tr>
            <tr>
              <td width="70px">材质:</td>
              <td>{{ wmsInfo.cz }}</td>
            </tr>
            <tr>
              <td width="70px">特征:</td>
              <td>{{ wmsInfo.tz }}</td>
            </tr>
            <tr>
              <td width="70px">地面高程:</td>
              <td>{{ wmsInfo.dm_gc }} m</td>
            </tr>
            <tr>
              <td width="70px">管点压力:</td>
              <td>{{ wmsInfo.point_yl }}</td>
            </tr>
            <tr>
              <td width="70px">X坐标:</td>
              <td>{{ wmsInfo.x }}</td>
            </tr>
            <tr>
              <td width="70px">Y坐标:</td>
              <td>{{ wmsInfo.y }}</td>
            </tr>
            <tr>
              <td width="70px">更新时间:</td>
              <td>{{ wmsInfo.up_time }}</td>
            </tr>
            <tr>
              <td width="70px">创建时间:</td>
              <td>{{ wmsInfo.js_date }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="fr">
        <div
          class="chart-wrapper"
          ref="funnelChart"
          v-if="wmsInfo.start_point"
        ></div>
        <div id="context3" class="context3" v-if="wmsInfo.tsdh">
          <div class="gaocheng">地面高程</div>
          <div class="right-line" id="rightLine">
            <div class="right-shen">埋深</div>
          </div>
          <div class="left-line">
            <div class="left-shen">埋深</div>
          </div>
          <div class="right-cir">
            <div class="right-bottom"></div>
            <div class="left-caliber">管径</div>
            <div class="right-m">
              <p id="e_mapnum"></p>
              <p id="e_material"></p>
            </div>
          </div>
          <div class="mid-cir">
            <div class="mid-bottom"></div>
            <div class="mid-line">
              <div class="mid-shen">井深</div>
            </div>
          </div>
          <div class="left-cir">
            <div class="left-bottom"></div>
            <div class="left-caliber">管径</div>
            <div class="left-m">
              <p id="s_mapnum"></p>
              <p id="s_material"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <lPop
    v-if="lPopShow"
    :title="lPopTitle"
    v-model:lPopShow="lPopShow"
    :lPwidth="'220px'"
    @drawToolClearn="drawToolClearn"
  >
    <div class="measure_box" v-if="lPopType === 1">
      <div class="title">测量工具</div>
      <div class="con">
        <div class="item">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="长度测量"
            placement="bottom-start"
          >
            <div class="tool" @click="clickMeasure(1)">
              <img src="/static/icon/nav32.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="面积测量"
            placement="bottom-start"
          >
            <div class="tool" @click="clickMeasure(2)">
              <img src="/static/icon/nav33.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="清除"
            placement="bottom-start"
          >
            <div class="tool" @click="clickMeasure(3)">
              <img src="/static/icon/nav35.png" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="measure_box" v-else-if="lPopType === 2">
      <div class="title">绘图工具</div>
      <div class="con">
        <div class="item">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="绘点"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('Point')">
              <img src="/static/icon/nav31.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="绘线"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('LineString')">
              <img src="/static/icon/nav32.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="绘圆"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('Circle')">
              <img src="/static/icon/nav34.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="绘多边形"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('Polygon')">
              <img src="/static/icon/nav33.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="清除"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('clear')">
              <img src="/static/icon/nav35.png" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="measure_box" v-else-if="lPopType === 3">
      <div class="title">图层列表</div>
      <div class="con">
        <div class="item">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[200011, 200021]"
            :default-checked-keys="[200011, 200021]"
            :props="defaultProps"
            @node-click="nodeClick"
            @check-change="checkChange"
            :render-after-expand="false"
          />
        </div>
      </div>
    </div>
    <div class="measure_box" v-else-if="lPopType === 4">
      <div class="title">搜索工具</div>
      <div class="con">
        <div class="item">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="多边形搜索"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('Polygon', true)">
              <img src="/static/icon/nav33.png" />
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="清除"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('clear')">
              <img src="/static/icon/nav35.png" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="measure_box" v-else-if="lPopType === 7">
      <div class="title">范围选择</div>
      <div class="con">
        <div class="item">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="绘多边形"
            placement="bottom-start"
          >
            <div class="tool" @click="clickDrawTool('Polygon', true)">
              <img src="/static/icon/nav33.png" />
            </div>
          </el-tooltip>
        </div>
      </div>
      <div
        class="box"
        v-loading="false"
        element-loading-background="rgba(0,0,0,.3)"
      >
        <!-- <div class="item"> -->
        <div class="l" v-if="kjcxForm.length !== 0">
          <el-tree
            :data="kjcxForm"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1, 2]"
            :default-checked-keys="[1]"
            :props="defaultProps"
            @node-click="nodeClick"
            @check-change="checkChange"
            :render-after-expand="false"
          />
        </div>
        <div class="r" v-if="kjcxForm.length !== 0">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="管材图表" name="1">
              <div class="pane-info">
                <div class="echarts">
                  <div ref="echarts1"></div>
                </div>
                <div class="echarts">
                  <div ref="echarts2"></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="管材统计" name="2">
              <div class="pane-info">
                <div class="item">
                  管线段编码：JSGC089YS0048-C089YSC089YSC089YS
                </div>
                <div class="item">管线名称：南县雨水管线</div>
                <div class="item">所属区划：儒林段</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="管径统计" name="3">
              <div class="pane-info">统计</div>
            </el-tab-pane>
            <el-tab-pane label="设施统计" name="4">
              <div class="pane-info">设施统计</div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- </div> -->
      </div>
    </div>
  </lPop>
  <a id="image-download" download="map.png"></a>
  <ExplosionAnalysis
    :ExplosionAnalysisVisible="ExplosionAnalysisVisible"
    :ExplosionAnalysisAdd="ExplosionAnalysisAdd"
    @listenExplosionAnalysis="listenExplosionAnalysis"
  ></ExplosionAnalysis>
  <PipelineAgingAnalysis
    :PipelineAgingVisible="PipelineAgingVisible"
    :PipelineAgingArr="PipelineAgingArr"
    @listenPipelineAging="listenPipelineAging"
  ></PipelineAgingAnalysis>
  <QuickQuery
    :QuickQueryVisible="QuickQueryVisible"
    :QuickQueryArr="QuickQueryArr"
    @listenQuickQuery="listenQuickQuery"
  ></QuickQuery>
  <dragDialog :dialogVisible="dialogVisible"></dragDialog>
  <playDialog v-model:playDialogVisible="playDialogVisible"></playDialog>
  <echartsGis
    v-if="!showNav && isEchartsGis === '指定区域'"
    @clickTool="clickTool"
  ></echartsGis>
  <echartsGis1
    v-else-if="!showNav && isEchartsGis === '安乡县'"
    @clickTool="clickTool"
  ></echartsGis1>
  <echartsGis
    v-else-if="!showNav && isEchartsGis === '衡南县'"
    @clickTool="clickTool"
  ></echartsGis>
  <input id="swipe" type="range" />
  <!-- <div class="key_box" v-if="keyShow">
    <div class="item">
      <img src="/static/icon/nav48.png" />
      <span>加气站</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav55.png" />
      <span>流量计</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav54.png" />
      <span>消防栓</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav53.png" />
      <span>信号塔</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav52.png" />
      <span>液位计</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav51.png" />
      <span>智能监控</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav50.png" />
      <span>智能井盖</span>
    </div>
    <div class="item">
      <img src="/static/icon/nav49.png" />
      <span>智能路灯</span>
    </div>
  </div> -->
  <!-- <div class="map_tool">
    <el-tooltip class="box-item" effect="dark" content="默认范围" placement="right-start">
      <div class="item" @click="clickTool(8)">
        <img src="/static/icon/nav37.png" />
      </div>
    </el-tooltip>
    <el-tooltip class="box-item" effect="dark" content="卷帘工具" placement="right-start">
      <div class="item" @click="clickTool(6)">
        <img src="/static/icon/nav38.png" />
      </div>
    </el-tooltip>
    <el-tooltip class="box-item" effect="dark" content="全屏" placement="right-start">
      <div class="item" @click="clickTool(9)">
        <img src="/static/icon/nav39.png" />
      </div>
    </el-tooltip>
  </div> -->
  <!-- <div class="search" v-if="showNav !== 1">
    <div class="mt-4">
      <el-input v-model="searchVal" placeholder="输入关键字按回车键搜索" class="input-with-select" @blur="searchBlur"
        @clear="searchClear" clearable>
        <template #append>
          <el-button :icon="Search" @click="clickSearch" />
        </template>
</el-input>
</div>
<div class="box" v-if="searchShow">
  <div class="item" v-for="(item, index) in searchList" :key="index" @click="clickPoi(item.location)">
    <div class="t">{{ index + 1 }}.{{ item.name }}</div>
    <div class="b">来源：网络定位</div>
  </div>
</div>
</div> -->
  <!-- <div class="map_btn" v-if="mapBtnType !== 0" @click="btnLogout(mapBtnType)">
    退出{{ { 1: '卷帘' }[mapBtnType] }}
  </div> -->
  <div class="check-div" :class="showNav ? 'check-div-r' : ''">
    <div class="check-box">
      <el-radio-group v-model="underlayValue" @change="changeUnderlay">
        <el-radio :value="3">个性图层</el-radio>
        <el-radio :value="2">普通图层</el-radio>
        <el-radio :value="1">影像图层</el-radio>
      </el-radio-group>
    </div>
    <div class="check-box1">
      <el-checkbox v-model="showNav" label="纯净模式" size="large" />
    </div>
  </div>
  <div class="check-div-fl">
    <div v-if="analysisStatus" class="clear-btn" @click="clickClear()">
      清除绘制
    </div>
    <div class="check-box">
      <div class="tips">图例说明</div>
      <el-checkbox-group v-model="checkList" @change="changeTl">
        <el-checkbox value="'高压'" size="large">高压</el-checkbox>
        <el-checkbox value="'次高压'" size="large">次高压</el-checkbox>
        <el-checkbox value="'中压'" size="large">中压</el-checkbox>
        <el-checkbox value="'低压'" size="large">低压</el-checkbox>
        <el-checkbox value="'阀门'" size="large">阀门</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
  <!-- <div class="bottom-btn">
    <div class="box-btn-item">
          <el-button type="primary" @click="clickTool(1)">空间测量</el-button>
          <el-button type="primary" @click="clickTool('快速查询')">快速查询</el-button>
          <el-button type="primary" @click="clickTool('爆管分析')">爆管分析</el-button>
          <el-button type="primary" @click="clickTool('管线老化分析')">老化分析</el-button>
        </div>
  </div> -->
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import 'ol/ol.css'
import GeoJSON from 'ol/format/GeoJSON'
import Map from 'ol/Map'
import View from 'ol/View'
import {
  Tile,
  Image,
  Vector as VectorLayer,
  Group as LayerGroup
} from 'ol/layer'
import { fromLonLat } from 'ol/proj'
import LayerVector from 'ol/layer/Vector'
import {
  XYZ,
  ImageWMS,
  Vector as VectorSource,
  Cluster,
  Stamen,
  TileWMS
} from 'ol/source'
import Overlay from 'ol/Overlay'
import {
  Stroke,
  Style,
  Text,
  Fill,
  Icon,
  Circle as CircleStyle
} from 'ol/style'
import Feature from 'ol/Feature'
import { Point, Polygon, LineString } from 'ol/geom'
import { createStringXY } from 'ol/coordinate'
import {
  defaults as defaultControls,
  ScaleLine,
  MousePosition
} from 'ol/control'
import lPop from '../components/dialog/lPop.vue'
import dragDialog from '../components/dialog/dragDialog.vue'
import playDialog from '../components/dialog/playDialog.vue'
import echartsGis from '../components/echartsGis1.vue'
import echartsGis1 from '../components/echartsGis11.vue'
import echartsGis2 from '../components/echartsGis2.vue'
import Measure from '@/utils/openlayers/measure'
import DrawTool from '@/utils/openlayers/drawTool'
import { toggleFullScreen, formatValue, wgs84togcj02 } from '@/utils/js/tool'
import dayjs from 'dayjs'
import ManageService from '@/service/manage.service'
import axios from 'axios'
// import { Search } from '@element-plus/icons-vue'
import '@/utils/js/gifler.min.js'
import icon25 from '@/assets/icon/up_zhu.png'
// import proj4 from 'proj4'
// import { wayEcharts1, wayEcharts2 } from './cesium/js/echarts.js'
import Header1 from '@/components/Header/Header1.vue'
import ExplosionAnalysis from '@/components/dialog/ExplosionAnalysis.vue'
import PipelineAgingAnalysis from '@/components/dialog/PipelineAgingAnalysis.vue'
import QuickQuery from '@/components/dialog/QuickQuery.vue'
// import { request } from '@/utils/request'
// import { setToken, getToken } from '@/utils/auth'
import { useRouter } from 'vue-router'
const router = useRouter()
const piplineVisible = ref(false)
const dialogVisible = ref(false) //可拖拽对话框
const playDialogVisible = ref(false) //可拖拽对话框
const mapBtnType = ref(0) //地图操作退出类型
const activeName = ref('1')
// const keyShow = ref(true) //图例显示
const echarts1 = ref(null)
const echarts2 = ref(null)
const searchVal = ref('') //地面搜索
const searchList = ref([])
const gifLayer = ref(null)
const funnelChart = ref(null)
const searchShow = ref(false)
let data_StatisticsVisible = ref(false)
const initEcharts1 = () => {
  const myChart = echarts.init(funnelChart.value)
  const colors = ['#5470C6', '#EE6666']
  const len = wmsInfo.value.len ? wmsInfo.value.len.toFixed(2) : 0
  myChart.setOption(
    {
      color: colors,
      tooltip: {
        trigger: 'none',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        left: 50,
        right: 50,
        top: 30,
        bottom: 30
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          name: '编号',
          axisLine: {
            onZero: false,
            lineStyle: {
              color: colors[1]
            }
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                return (
                  '编号' +
                  params.value +
                  (params.seriesData.length
                    ? '：' + params.seriesData[0].data + 'm'
                    : '')
                )
              }
            }
          },
          data: wmsInfo.value.start_point
            ? [wmsInfo.value.start_point, wmsInfo.value.end_point]
            : []
        },
        {
          type: 'category',
          name: '管线长度',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: colors[0]
            }
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                return '管线长度' + params.value + 'm'
              }
            }
          },
          // prettier-ignore
          data: ['', len, len, len, len, '']
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '埋深',
          min: 0,
          max: wmsInfo.value.start_ms ? wmsInfo.value.start_ms * 2 : 1
        }
      ],
      series: [
        {
          name: '埋深',
          type: 'line',
          smooth: true,
          emphasis: {
            focus: 'series'
          },
          data: wmsInfo.value.start_ms
            ? [wmsInfo.value.start_ms, wmsInfo.value.end_ms]
            : [0.65, 0.65],
          smooth: true, // 平滑线条
          lineDash: [5, 5], // 虚线样式
          symbol: 'circle', // 响应的节点图案 (可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond' 甚至是 SVG 图形)
          symbolSize: [10, 10], // 设置节点的大小
          itemStyle: {
            color: '#ff0000' // 设置折线颜色
          },
          areaStyle: {
            // 设置区域样式以增强管道效果
            color: 'rgba(255, 0, 0, 0.2)'
          }
        }
      ]
    },
    true
  )
}
const clickClear = () => {
  if (ExplosionAnalysisLayes.value.xian) {
    map.value.removeLayer(ExplosionAnalysisLayes.value.xian)
    ExplosionAnalysisLayes.value.xian = null
  }
  analysisStatus.value = ''
}
const clickSquib = () => {
  piplineVisible.value = true
}
const clickSearch = () => {
  if (!searchVal.value) {
    ElMessage({
      message: '请输入关键字',
      type: 'error'
    })
    return
  }
  // axios('http://192.168.8.188:8081/test-name/sayHi?name=123123').then((ret) => {
  //   if (ret.data && ret.data.pois) {
  //     searchList.value = ret.data.pois
  //     searchShow.value = true
  //   }
  // })
  axios('http://restapi.amap.com/v3/place/text', {
    params: {
      key: '7af344923948e5e1e483952b4d0f37e9',
      keywords: searchVal.value,
      city: '南县',
      citylimit: true
    }
  }).then((ret) => {
    if (ret.data && ret.data.pois) {
      searchList.value = ret.data.pois
      searchShow.value = true
    }
  })
}

// const tubeMaterial = ref([])

const drawToolClearn = () => {
  drawTool.value && drawTool.value.clear && drawTool.value.clear()
}
const pipline_clone = () => {
  piplineVisible.value = false
  data_StatisticsVisible.value = false
  drawTool.value.clear()
}
// const pipeNetwork = () => {
//   clickDrawTool('Polygon', undefined, () => {
//     piplineVisible.value = true
//     loading_piplineVisible.value = true
//     setTimeout(() => {
//       loading_piplineVisible.value = false
//     }, 2000)
//   })
// }
const searchBlur = () => {
  if (!searchVal.value) {
    searchShow.value = false
    searchList.value = []
  }
  if (gifLayer.value) {
    map.value.removeLayer(gifLayer.value)
    gifLayer.value = null
  }
}
const searchClear = () => {
  searchShow.value = false
  searchList.value = []
  if (gifLayer.value) {
    map.value.removeLayer(gifLayer.value)
    gifLayer.value = null
  }
}
// const clickPoi = (val) => {
//   if (gifLayer.value) {
//     map.value.removeLayer(gifLayer.value)
//     gifLayer.value = null
//   }
//   const arr = val.split(',')
//   const arr1 = wgs84togcj02(Number(arr[0]), Number(arr[1]))
//   mapZoom([arr1[0], arr1[1]], 16)
//   const iconFeature = new Feature({
//     geometry: new Point([arr1[0], arr1[1]])
//   })

//   const vectorSource = new VectorSource({
//     features: [iconFeature]
//   })

//   const vectorLayer = new VectorLayer({
//     source: vectorSource
//   })

//   map.value.addLayer(vectorLayer)
//   gifLayer.value = vectorLayer
//   const gifUrl = '/static/icon/Png_BaoGuan.gif'
//   const gif = gifler(gifUrl)
//   gif.frames(
//     document.createElement('canvas'),
//     function (ctx, frame) {
//       if (!iconFeature.getStyle()) {
//         iconFeature.setStyle(
//           new Style({
//             image: new Icon({
//               img: ctx.canvas,
//               imgSize: [frame.width, frame.height],
//               opacity: 0.8
//             })
//           })
//         )
//       }
//       ctx.clearRect(0, 0, frame.width, frame.height)
//       ctx.drawImage(frame.buffer, frame.x, frame.y)
//       map.value.render()
//     },
//     true
//   )
// }
// const btnLogout = (type) => {
//   if (type === 1) {
//     layers[1].setVisible(false)
//     layers[1].un('prerender', onprerender)
//     layers[1].un('postrender', onpostrender)
//     // layers[1].setSource(td_img.zj)
//     isWipe.value = false
//     mapBtnType.value = 0
//     map.value.render()
//   }
// }
//初始化空间查询echarts图表
const initEcharts = () => {
  setTimeout(() => {
    const chart1 = echarts.init(echarts1.value)
    chart1.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        axisLine: {
          //x轴坐标轴，false为隐藏，true为显示
          show: false
        },

        axisTick: {
          show: false
        },
        type: 'category',
        data: ['给水', '排水', '燃气', '热力', '电力', '通信', '工业'],
        textStyle: {
          color: '#fff'
        },
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        }
      },
      grid: {
        top: '3%',
        left: '3%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          barWidth: 15,
          itemStyle: {
            normal: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#5941ef' },
                { offset: 1, color: '#061c35' }
              ])
            }
          },
          type: 'bar'
        }
      ]
    })
    const chart2 = echarts.init(echarts2.value)
    chart2.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        axisLine: {
          //x轴坐标轴，false为隐藏，true为显示
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'category',
        data: ['给水', '排水', '燃气', '热力', '电力', '通信', '工业'],
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        }
      },
      grid: {
        top: '3%',
        left: '3%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          barWidth: 15,
          itemStyle: {
            normal: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#0caed3' },
                { offset: 1, color: '#065162' }
              ])
            }
          },
          type: 'bar'
        }
      ]
    })
  }, 50)
}
const changeTl = () => {
  const params1 = mws_wmsLayer1.value.getSource()
  params1.updateParams({
    CQL_FILTER:
      mapInfo.value.cqFilter + `and (gx_yl in(${checkList.value.join(',')}))` // 更改 CQL_FILTER
  })
  const params = mws_wmsLayer.value.getSource()
  if (checkList.value.includes("'阀门'")) {
    params.updateParams({
      CQL_FILTER: mapInfo.value.cqFilter
    })
  } else {
    params.updateParams({
      CQL_FILTER: mapInfo.value.cqFilter + 'and ytz is null'
    })
  }
}
const handleClick = (tab, event) => {
  console.log(tab.props.label)
  if (tab.props.label === '统计图') {
    initEcharts()
  }
}
/*
 *时间天气显示
 */
const dateDay = ref(null)
const dateYear = ref(null)
const dateWeek = ref(null)
const weekday = ref([
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六'
])
const timer = ref(null)
timer.value = setInterval(() => {
  const date = dayjs(new Date())
  dateDay.value = date.format('HH:mm:ss')
  dateYear.value = date.format('YYYY-MM-DD')
  dateWeek.value = date.format(weekday.value[date.day()])
}, 1000)
/*
 *时间天气显示结束
 */
/*测量工具*/
//节点数据
const defaultProps = {
  children: 'children',
  label: 'label'
}
const data = ref([
  {
    id: 200010,
    label: '燃气管网',
    children: [
      {
        id: 200011,
        label: '南县燃气管线',
        type: 'wms图层',
        layers: 'main:gcj20To84'
      },
      {
        id: 200021,
        label: '南县燃气管点',
        type: 'wms图层',
        layers: 'main:yynxgd'
      }
    ]
  }
])
//图层节点点击
const nodeClick = (item) => {
  if (item.centre?.coordinates) {
    mapZoom(item.centre.coordinates, 12)
  }
}
//节点选择
const checkChange = (data, chexk, children) => {
  // console.log(data)
  // console.log(chexk)
  if (data.type === 'wms图层') {
    const layers = wmsArr.value.getLayers().array_
    // console.log(layers, 'layers')
    layers.map((layer) => {
      console.log(layer.get('name'))
      if (layer.get('name') === data.label) {
        layer.setVisible(chexk)
      }
      // if (parmas.name.includes(layer.get("name"))) {
      //   layer.setVisible(parmas.show);
      // }
      // console.log(, '设施')
    })
  }
  // if (data.label != '管线' && data.label != '特征点') return
  // if (data.workspace && data.aliasName) {
  //   const layers = `${data.workspace}:${data.aliasName}`
  //   const _item = wmsLayer.value.findIndex((item) => {
  //     return item.name === layers
  //   })
  //   if (chexk && layers) {
  //     setWmsLayer(layers, 1)
  //   } else if (!chexk && layers) {
  //     if (wmsLayer.value[_item] && wmsLayer.value[_item].layers) {
  //       map.value.removeLayer(wmsLayer.value[_item].layers)
  //       wmsLayer.value.splice(_item, 1)
  //     }
  //   }
  // }
}
const lPopShow = ref(false)
const lPopTitle = ref('测量')
const lPopType = ref(7)
const measure = ref(null) //初始化测量工具
const drawTool = ref(null) //初始化绘制工具
const navPop = ref(1) //pop选中值
//点击pop导航栏
const clickNavPop = (type) => {
  navPop.value = type
}
//点击播放
const clickPlay = (type) => {
  playDialogVisible.value = true
}
//点击测量工具
const clickMeasure = (val) => {
  // alert(88)
  if (measure.value === null) {
    measure.value = new Measure(map.value, vector.value)
  }
  if (drawTool.value) {
    drawTool.value.removeStop()
  }
  switch (val) {
    case 1:
      measure.value.measure('LineString')
      break
    case 2:
      measure.value.measure('Polygon')
      break
    case 3:
      measure.value.clearMeasure()
      break
  }
}
/**
 *  判断一个点是否在多边形内部
 *  @param points 多边形坐标集合
 *  @param testPoint 测试点坐标
 *  返回true为真，false为假
 *  */
const insidePolygon = (points, testPoint) => {
  var x = testPoint[0],
    y = testPoint[1]
  var inside = false
  for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
    var xi = points[i][0],
      yi = points[i][1]
    var xj = points[j][0],
      yj = points[j][1]

    var intersect =
      yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
    if (intersect) inside = !inside
  }
  return inside
}
//点击绘图工具
const kjcxForm = ref([])
const clickDrawTool = (val, type, callback) => {
  // alert('实时')@

  if (drawTool.value === null) {
    drawTool.value = new DrawTool(map.value, vector.value)
  }
  if (measure.value) {
    measure.value.removeStop()
  }
  if (val === 'clear') {
    drawTool.value.clear()
    return
  }

  if (type) {
    drawTool.value.drawFun(val, true, function (evt) {
      function splitArrayIntoPairs(arr) {
        return arr.reduce((accumulator, currentValue, index) => {
          if (index % 2 === 0) {
            accumulator.push([currentValue])
          } else {
            accumulator[accumulator.length - 1].push(currentValue)
          }
          return accumulator
        }, [])
      }
      const polygon = evt.feature.getGeometry()
      if (type === '管线老化分析') {
        PipelineAgingArr.value = [splitArrayIntoPairs(polygon.flatCoordinates)]
      } else {
        QuickQueryArr.value = [splitArrayIntoPairs(polygon.flatCoordinates)]
      }
      // console.log(polygon.flatCoordinates)
    })
  } else if (callback) {
    drawTool.value.drawFun(val, true, callback)
  } else {
    drawTool.value.drawFun(val)
  }
}
const analysisType = ref('')
//监听管线老化分析回调
const PipelineAgingVisible = ref(false)
const PipelineAgingArr = ref([])
const listenPipelineAging = (type, geom, tips) => {
  if (type === '关闭弹窗') {
    PipelineAgingVisible.value = false
  } else if (type === '绘制') {
    mapinfoStatus.value = '查询绘制'
    ElMessage.info('请在地图上框选区域')
    clickDrawTool('Polygon', '管线老化分析')
  } else if (type === '清除绘制') {
    mapinfoStatus.value = ''
    clickDrawTool('clear')
    PipelineAgingArr.value = []
  } else if (type === '定位') {
    if (tips === '管线') {
      drawLine([geom], true)
      mapZoom(geom[0], 18)
    } else {
      iconMap([geom], [tips], true)
      mapZoom(geom, 18)
    }
  }
}
//监听爆管分析回调
const ExplosionAnalysisVisible = ref(false)
const ExplosionAnalysisAdd = ref({
  type: false,
  coordinate: ''
})
const ExplosionAnalysisLayes = ref({
  dian: null,
  xian: null
})
const listenExplosionAnalysis = (type, geom) => {
  if (type === '关闭弹窗') {
    ExplosionAnalysisVisible.value = false
  } else if (type === '新增爆管点') {
    ElMessage.info('请在地图上选择管线')
    ExplosionAnalysisAdd.value.coordinate = ''
    ExplosionAnalysisAdd.value.type = true
  } else if (type === '定位' || type === '定位1') {
    mapZoom(geom, 18)
  } else if (type === '加载爆管分析点') {
    const arr = []
    const arr1 = []
    const arr2 = []
    if (geom.point) {
      arr.push(geom.point.geom.coordinates)
      arr1.push(geom.point.tz)
    }
    if (geom.rqPointList && geom.rqPointList.length > 0) {
      geom.rqPointList.forEach((item) => {
        arr.push(item.geom.coordinates)
        arr1.push(item.tz)
      })
    }
    if (geom.rqLineList && geom.rqLineList.length > 0) {
      geom.rqLineList.forEach((item) => {
        arr2.push(item.geom.coordinates)
      })
    }
    iconMap(arr, arr1)
    drawLine(arr2)
  } else if (type === '清除结果') {
    if (ExplosionAnalysisLayes.value.dian) {
      map.value.removeLayer(ExplosionAnalysisLayes.value.dian)
      ExplosionAnalysisLayes.value.dian = null
    }
    if (ExplosionAnalysisLayes.value.xian) {
      map.value.removeLayer(ExplosionAnalysisLayes.value.xian)
      ExplosionAnalysisLayes.value.xian = null
    }
  }
}
//监听快速查询回调
const QuickQueryVisible = ref(false)
const QuickQueryArr = ref([])
const listenQuickQuery = (type, geom, tips) => {
  if (type === '关闭弹窗') {
    QuickQueryVisible.value = false
  } else if (type === '绘制') {
    mapinfoStatus.value = '查询绘制'
    ElMessage.info('请在地图上框选区域')
    clickDrawTool('Polygon', true)
  } else if (type === '清除绘制') {
    mapinfoStatus.value = ''
    clickDrawTool('clear')
    QuickQueryArr.value = []
  } else if (type === '定位') {
    if (tips === '管线') {
      drawLine([geom], true)
      mapZoom(geom[0], 18)
    } else {
      iconMap([geom], [tips], true)
      mapZoom(geom, 18)
    }
  }
}
//隐藏分析工具
const hideAnalysisTool = () => {
  ExplosionAnalysisVisible.value = false
  QuickQueryVisible.value = false
  PipelineAgingVisible.value = false
}
const analysisStatus = ref('')
//点击测绘工具
const clickTool = (val, data) => {
  if (val === '管线高亮') {
    hideAnalysisTool()
    const arr = data.map((item) => {
      return item.geom.coordinates
    })
    analysisStatus.value = '埋设管线高亮'
    drawLine(arr, true)
    return
  }
  if (val === '埋设管线高亮') {
    hideAnalysisTool()
    const arr = data.map((item) => {
      return item.coordinates
    })
    analysisStatus.value = '埋设管线高亮'
    drawLine(arr, true)
    return
  }
  if (val === '管线管径高亮') {
    hideAnalysisTool()
    const arr = data.map((item) => {
      return item.coordinates
    })
    analysisStatus.value = '管线管径高亮'
    drawLine(arr, true)
    return
  }
  if (val === '爆管分析') {
    hideAnalysisTool()
    ExplosionAnalysisVisible.value = true
    return
  }
  if (val === '快速查询') {
    hideAnalysisTool()
    QuickQueryVisible.value = true
    return
  }
  if (val === '管线老化分析') {
    hideAnalysisTool()
    PipelineAgingVisible.value = true
    return
  }
  if (val === 5) {
    exportPNG() //图片导出
    return
  }
  if (val === 6) {
    ElMessage({
      message: '进入卷帘工具',
      type: 'success'
    })
    mapBtnType.value = 1
    swipeRender() //卷帘工具
    return
  }
  //默认范围
  if (val === 8) {
    mapZoom([112.3881, 29.3684])
    return
  }
  if (val === 9) {
    toggleFullScreen()
    return
  }
  if (val === 10) {
    keyShow.value = !keyShow.value
    return
  }
  lPopShow.value = true
  lPopType.value = val
  switch (val) {
    case 1:
      lPopTitle.value = '测量'
      break
    case 2:
      lPopTitle.value = '绘图'
      break
    case 3:
      lPopTitle.value = '图层'
      break
    case 4:
      lPopTitle.value = '统计'
      break
    case 7:
      waterLevelVisible.value = false
      wayVisible.value = false
      attributeQuery.value = false
      lPopTitle.value = '快速查询'
      break
  }
}
/*测量工具结束*/
const pipeList = ref({
  ruHe: {
    //名称
    type: 'py_map', //类型
    typeName: 'ruHe', //名称
    maxFeatures: 5000, //大小
    color: '#3973ff', //管线颜色
    width: 5 //管线宽度
  }
})
const map = ref()
/*添加天地图图层*/
const addTile = (type, tk, isShow) => {
  return new Tile({
    //天地图线画图
    visible: isShow ? false : true,
    source: new XYZ({
      url: `http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}`,
      projection: 'EPSG:4326',
      wrapX: true,
      crossOrigin: 'anonymous'
    })
  })
}
/**
 * 初始化地图
 */
const vector_img = reactive({
  img: new XYZ({
    url: `https://t0.tianditu.gov.cn/vec_c/wmts?tk=a0715212311829787d06cc8fb9344e30&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,
    projection: 'EPSG:4326',
    crossOrigin: 'anonymous'
  }),
  zj: new XYZ({
    url: `https://t0.tianditu.gov.cn/cva_c/wmts?tk=a0715212311829787d06cc8fb9344e30&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,
    projection: 'EPSG:4326',
    crossOrigin: 'anonymous'
  })
})
const td_img = reactive({
  img: new XYZ({
    url: `http://t0.tianditu.gov.cn/img_c/wmts?tk=a0715212311829787d06cc8fb9344e30&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,
    projection: 'EPSG:4326',
    crossOrigin: 'anonymous'
  }),
  zj: new XYZ({
    url: `http://t0.tianditu.gov.cn/cia_c/wmts?tk=6e725b3afd521cca1b6ed0c0a55b845&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.60&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,
    projection: 'EPSG:4326',
    crossOrigin: 'anonymous'
  })
})
const dx_img = reactive({
  img: new XYZ({
    url: `http://t0.tianditu.gov.cn/ter_c/wmts?tk=a0715212311829787d06cc8fb9344e30&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,
    projection: 'EPSG:4326',
    crossOrigin: 'anonymous'
  }),
  zj: new XYZ({
    url: `http://t0.tianditu.gov.cn/cta_c/wmts?tk=a0715212311829787d06cc8fb9344e30&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`,
    projection: 'EPSG:4326',
    crossOrigin: 'anonymous'
  })
})
const gd_img = reactive({
  img: new XYZ({
    url: `http://192.168.8.188:8091/jt-cloud-auth/ip/getBytes/{z}/{x}/{y}`,
    projection: 'EPSG:3857',
    crossOrigin: 'anonymous'
  })
})
const layers = reactive([])
//绘制带箭条的线段
const drawLine = (linesArray, isClean) => {
  if (isClean && ExplosionAnalysisLayes.value.xian) {
    map.value.removeLayer(ExplosionAnalysisLayes.value.xian)
    ExplosionAnalysisLayes.value.xian = null
  }
  const style = new Style({
    stroke: new Stroke({
      color: 'rgba(255, 0, 0, 0.5)',
      width: 25
    }),
    image: new CircleStyle({
      radius: 15,
      stroke: new Stroke({
        color: 'rgba(255, 0, 0, 1.0)',
        width: 3 // 修正 rad -> width
      }),
      fill: new Fill({
        color: 'rgba(255, 0, 0, 0.5)'
      })
    })
  })

  // 创建一个向量源，用于存储所有线段特征
  const vectorSource = new VectorSource()

  // 遍历 linesArray，创建 LineString 特征并添加到向量源
  linesArray.forEach((coordinates) => {
    const lineFeature = new Feature({
      geometry: new LineString(coordinates)
    })
    vectorSource.addFeature(lineFeature) // 添加特征到源
  })

  // 创建一个向量层，使用创建的源
  const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: style
  })

  ExplosionAnalysisLayes.value.xian = vectorLayer
  // 将向量图层添加到地图
  map.value.addLayer(vectorLayer)
  // const style = new Style({
  //   stroke: new Stroke({
  //     color: 'rgba(255, 0, 0, 0.5)',
  //     width: 25
  //   }),
  //   image: new CircleStyle({
  //     radius: 15,
  //     stroke: new Stroke({
  //       color: "rgba(255, 0, 0, 1.0)",
  //       rad: 3,
  //     }),
  //     fill: new Fill({
  //       color: "rgba(255, 0, 0, 0.5)",
  //     }),
  //   }),
  // })
  // const vector = new VectorLayer({
  //   source: new VectorSource({
  //     features: [
  //       new Feature({
  //         geometry: new LineString(coordinates),
  //         id: ''
  //       })
  //     ]
  //   }),
  //   style: style
  // })
  // map.value.addLayer(vector)
}
//底图切换
const underlayValue = ref(1)
const changeUnderlay = () => {
  // underlayValue.value = val
  const box = document.getElementsByClassName('blueLayer')
  const box1 = document.getElementsByClassName('notes')
  switch (underlayValue.value) {
    case 1:
      layers[0].setSource(td_img.img)
      layers[1].setSource(td_img.zj)
      box[0].style.filter = 'none'
      box1[0].style.filter = 'none'
      break
    case 2:
      layers[0].setSource(vector_img.img)
      layers[1].setSource(vector_img.zj)
      box[0].style.filter = 'none'
      box1[0].style.filter = 'none'
      break
    case 3:
      layers[0].setSource(vector_img.img)
      layers[1].setSource(vector_img.zj)
      box[0].style.filter =
        'grayscale(100%) invert(74%) sepia(206%) hue-rotate(160deg) saturate(865%) brightness(39%) contrast(107%)'
      box1[0].style.filter =
        'grayscale(2%) invert(83%) sepia(30%) hue-rotate(200deg) saturate(262%) brightness(119%) contrast(174%)'
      break
    default:
      break
  }
}
const mapinfoStatus = ref('')
//地图点击事件
const mapClickInfo = async (e) => {
  const viewResolution = map.value.getView().getResolution()
  const coordinate = e.coordinate
  if (mapinfoStatus.value) {
    return
  }
  if (ExplosionAnalysisAdd.value.type) {
    ExplosionAnalysisAdd.value.type = false
    ExplosionAnalysisAdd.value.coordinate = coordinate
    return
  }
  const layers = wmsArr.value.getLayers().array_
  let status = 0
  layers.forEach((item) => {
    const source = item.getSource()
    const view = map.value.getView()
    const url = source.getFeatureInfoUrl(
      e.coordinate,
      viewResolution,
      view.getProjection(),
      {
        INFO_FORMAT: 'application/json',
        FEATURE_COUNT: 1,
        format_options: 'callback: getJson'
      }
    )
    if (url) {
      fetch(url, {
        mode: 'cors',
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      })
        .then(function (response) {
          return response.json()
        })
        .then(function (data) {
          if (data?.features[0]?.properties && status === 0) {
            status = 1
            wmsInfo.value = data.features[0].properties
            overlay.value.setPosition(coordinate)
            setTimeout(() => {
              initEcharts1()
            })
          }
        })
    }
  })
  setTimeout(() => {
    if (status === 0) {
      wmsInfo.value = {}
      wmsInfo.value.start_point = '无数据'

      overlay.value.setPosition(coordinate)
    }
  }, 3000)
}
const overlay = ref(null)
const vector = ref(null)
const gatherPolygon = reactive([])
const checkWms = ref(null)
const drawLineString = (data) => {
  let lineString = new LineString(data)
  // polygon.applyTransform(getTransform('EPSG:4326', 'EPSG:3857'))
  let feature = new Feature(lineString)
  let lineStyle = new Style({
    fill: new Fill({
      color: 'rgba(1, 210, 241, 0.2)'
    }),
    stroke: new Stroke({
      color: 'rgba(255, 0, 0)',
      width: 4
    })
  })
  // 添加线的样式
  feature.setStyle(lineStyle)
  var vectorSource = new VectorSource()
  vectorSource.addFeature(feature)
  checkWms.value = new LayerVector({
    source: vectorSource
  })
  map.value.addLayer(checkWms.value)
}
const drawPolygon = (data, type, color = 'rgba(194, 216, 181)') => {
  var polygon = new Polygon(data)
  var feature = new Feature(polygon)
  let lineStyle = new Style({
    fill: new Fill({
      color: type === 20 ? 'rgba(1, 210, 241, 0)' : 'rgba(1, 210, 241, 0.1)'
    }),
    stroke: new Stroke({
      color,
      width: 2
    })
  })
  // 添加线的样式
  feature.setStyle(lineStyle)
  var vectorSource = new VectorSource()
  vectorSource.addFeature(feature)
  if (type === '绘制wms选中样式') {
    checkWms.value = new LayerVector({
      source: vectorSource
    })
    map.value.addLayer(checkWms.value)
    return
  }
  gatherPolygon.push(
    new LayerVector({
      source: vectorSource
    })
  )
  map.value.addLayer(gatherPolygon[gatherPolygon.length - 1])
}
// 关闭弹窗
const closePopup = () => {
  overlay.value.setPosition(undefined) // setPosition 传入undefined会隐藏弹窗元素
  currentCoordinate.value = ''
}
const wmsArr = ref(
  new LayerGroup({
    layers: [],
    name: '管线图层'
  })
) //wms服务集合
const wmsInfo = ref({}) //wms服务请求获取参数
const mapInfo = ref({
  type: '默认地点',
  center: [112.3881, 29.3684],
  bjGeom: [],
  cqFilter: ''
})
const mws_wmsLayer = ref(null)
const mws_wmsLayer1 = ref(null)
const initMap = () => {
  // let urlo =
  //   'http://t5.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=a0715212311829787d06cc8fb9344e30'
  // let urlt =
  //   'http://t5.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7700dcd3f8a52d1c1b7592ee665efef1'
  overlay.value = new Overlay({
    element: popupCom.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    autoPanAnimation: {
      // 底图移动动画
      duration: 250
    },
    positioning: 'top-center',
    offset: [0, 0]
  })

  vector.value = new VectorLayer({
    source: new VectorSource(),
    style: new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    })
  })

  layers.push.apply(layers, [
    new Tile({
      title: '天地图矢量图层',
      className: 'blueLayer',
      source: td_img.img
    }),
    new Tile({
      title: '天地图注记图层',
      className: 'notes',
      source: td_img.zj
    }),
    vector.value
  ])
  const mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(4),
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position')
  })
  // 创建一个比例尺控件
  var scaleLineControl = new ScaleLine({
    units: 'metric' // 比例尺默认的单位
  })
  map.value = new Map({
    layers: layers,
    target: document.getElementById('mapDiv'),
    controls: defaultControls().extend([
      mousePositionControl,
      scaleLineControl
    ]),
    view: new View({
      center: mapInfo.value.center, //当前中心点
      zoom: 14, //默认缩放级别
      minZoom: 1, //最小缩放级别
      maxZoom: 18, //最大缩放级别
      projection: 'EPSG:4326'
    }),
    overlays: [overlay.value]
  })

  mws_wmsLayer.value = new Tile({
    name: '南县燃气管点',
    zIndex: 10,
    source: new TileWMS({
      //WMS服务基地址
      url: 'https://rq.gis.hmx-cloud.com/geoserver/yt/wms',
      //图层参数
      params: {
        LAYERS: 'yt:rq_point',
        SRS: 'EPSG:4490',
        CQL_FILTER: mapInfo.value.cqFilter
      },
      //服务类型
      serverType: 'geoserver',
      projection: 'EPSG:4490'
    })
  })
  map.value.addLayer(mws_wmsLayer.value)
  mws_wmsLayer1.value = new Tile({
    name: '南县燃气管线',
    source: new TileWMS({
      //WMS服务基地址
      url: 'https://rq.gis.hmx-cloud.com/geoserver/yt/wms',
      //图层参数
      params: {
        LAYERS: 'yt:rq_line',
        SRS: 'EPSG:4490',
        CQL_FILTER: mapInfo.value.cqFilter
      },
      //服务类型
      serverType: 'geoserver',
      projection: 'EPSG:4490'
    })
  })
  map.value.addLayer(mws_wmsLayer1.value)
  if (isEchartsGis.value === '安乡县') {
    const _wmsLayer2 = new Tile({
      name: '安乡燃气管线',
      source: new TileWMS({
        //WMS服务基地址
        url: 'https://rq.gis.hmx-cloud.com/geoserver/yt/wms',
        //图层参数
        params: {
          LAYERS: 'yt:ax',
          SRS: 'EPSG:4490'
          // CQL_FILTER: mapInfo.value.cqFilter
        },
        //服务类型
        serverType: 'geoserver',
        projection: 'EPSG:4490'
      })
    })
    map.value.addLayer(_wmsLayer2)
  }
  if (isEchartsGis.value === '衡南县') {
    const _wmsLayer2 = new Tile({
      name: '安乡燃气管线',
      source: new TileWMS({
        //WMS服务基地址
        url: 'https://rq.gis.hmx-cloud.com/geoserver/yt/wms',
        //图层参数
        params: {
          LAYERS: 'yt:hngx',
          SRS: 'EPSG:4490'
          // CQL_FILTER: mapInfo.value.cqFilter
        },
        //服务类型
        serverType: 'geoserver',
        projection: 'EPSG:4490'
      })
    })
    map.value.addLayer(_wmsLayer2)
  }

  setTimeout(() => {
    const box = document.getElementsByClassName('blueLayer')
    const box1 = document.getElementsByClassName('notes')
    box[0].style.filter = 'none'
    box1[0].style.filter = 'none'
  }, 100)
  wmsArr.value.getLayers().push(mws_wmsLayer.value)
  wmsArr.value.getLayers().push(mws_wmsLayer1.value)
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
  map.value.on('singleclick', async (e) => {
    mapClickInfo(e)
  })
  if (mapInfo.value.type === '默认地点') {
    axios('/static/json/nx.json').then((ret) => {
      drawPolygon(ret.data.features[0].geometry.coordinates[0], 20)
    })
  } else {
    drawPolygon(mapInfo.value.bjGeom, 20)
  }
}
//地图跳转
const mapZoom = (latlon, zoom) => {
  const view = map.value.getView()
  // 设置地图中心，将地图移动到中心点’
  view.setCenter(latlon)
  if (zoom) view.setZoom(zoom)
  map.value.render()
}

//pop标题
const popTitle = ref('')
/*
 * 卷帘工具集合
 */
const left = ref()
const mapWidth = ref()
const isMove = ref()
const isWipe = ref(false)
const clientleft = ref()
const minClientLeft = ref()
const maxClientLeft = ref()
const mapEl = ref(null)
const sliderEl = ref(null)

const onMouseDown = (e) => {
  if (!isWipe.value) return
  isMove.value = true
  clientleft.value = e.clientX
  sliderEl.value.style.cursor = 'move'
}
const onMouseMove = (e) => {
  if (!isMove.value) return
  if (e.clientX < minClientLeft.value || e.clientX > maxClientLeft.value) return

  const mx = e.clientX - clientleft.value
  clientleft.value = e.clientX

  left.value = left.value + mx
  map.value.render()
}
const onMouseUp = () => {
  if (!isWipe.value) return
  isMove.value = false
  sliderEl.value.style.cursor = 'default'
}
//卷帘工具
const swipeRender = () => {
  isWipe.value = true
  // 初始化时，卷帘处在地图中间位置，根据地图宽高计算
  mapWidth.value = mapEl.value.offsetWidth
  left.value = mapWidth.value / 2
  // 保证卷帘始终在地图内，并两边留一部分
  minClientLeft.value = mapEl.value.offsetLeft + 66
  maxClientLeft.value = minClientLeft.value + mapWidth.value - 50
  // layers[1].setSource(vector_img.img)
  // let titleText = addTile('vec', 'a0715212311829787d06cc8fb9344e30')
  // layers.splice.apply(1, 0, titleText)
  // layers.push.apply(layers, [titleText])
  layers[1].setVisible(true)
  layers[1].setSource(vector_img.img)
  layers[1].on('prerender', onprerender)
  layers[1].on('postrender', onpostrender)
  map.value.render()
}
const onprerender = (e) => {
  const ctx = e.context
  const width = ctx.canvas.width * (left.value / mapWidth.value)
  ctx.save()
  ctx.beginPath()
  ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height)
  ctx.clip() // 裁剪
}
const onpostrender = (e) => {
  const ctx = e.context
  ctx.restore()
}
/*
 * 卷帘工具集合结束
 */
/*
 * 调用方法更新 地图 范围
 */
// const updateMapExtent = (windowPostion) => {
//   // 将屏幕坐标 转换为 地图坐标
//   let pos = map.value.getCoordinateFromPixel([windowPostion.x, windowPostion.y])
//   // 修改第二个地图的范围
//   map.value.getLayers().getArray()[1].setExtent([0, 0, pos[0], pos[1]])
// }
/*加载wms*/
const wmsLayer = ref([])
const setWmsLayer = (name, type) => {
  const _wmsLayer = new Image({
    data: {
      type: type
    },
    source: new ImageWMS({
      //WMS服务基地址
      url: 'http://43.136.118.33:8080/geoserver/test/wms',
      //图层参数
      params: { LAYERS: name, SRS: 'EPSG:4326 ' },
      //服务类型
      serverType: 'geoserver',
      projection: 'EPSG:4326 '
    })
  })
  map.value.addLayer(_wmsLayer)
  // _wmsLayer.setVisible(false)
  // console.log(map.value.getLayerGroup().getLayers().array_[3].getSource())
  // setTimeout(() => {
  //   _wmsLayer.setVisible(true)
  // }, 1000)
  wmsLayer.value.push({ layers: _wmsLayer, name: name })
}
/*加载wms结束*/
/*展示聚合点位*/
const sourceCluster = ref()
const polymerizeLayer = ref([])
const showPoints = (data, type) => {
  // 聚合图层数据源
  sourceCluster.value = new Cluster({
    distance: 30,
    source: new VectorSource({
      features: []
    })
  })

  // polymerizeLayer.value = new VectorLayer({
  //   source: sourceCluster.value,
  //   style: (feature) => {
  //     return setClusterStyle(feature)
  //   }
  // })

  polymerizeLayer.value.push({
    type: type,
    layer: new VectorLayer({
      source: sourceCluster.value,
      style: (feature) => {
        return setClusterStyle(feature, type)
      }
    })
  })

  let features = []
  data.forEach((item) => {
    // if (item.gps_x != '' && item.gps_y != '') {
    let newObj = Object.assign({}, item)
    // let newObj = {}
    newObj.type = type
    newObj.geometry = new Point([
      Number(item.geom.coordinates[0]),
      Number(item.geom.coordinates[1])
    ])
    features.push(new Feature(newObj))
    // }
  })
  sourceCluster.value.getSource().addFeatures(features)
  polymerizeLayer.value[polymerizeLayer.value.length - 1].layer.setZIndex(10)
  map.value.addLayer(
    polymerizeLayer.value[polymerizeLayer.value.length - 1].layer
  )
  // setTimeout(() => {
  //   map.value.removeLayer(polymerizeLayer.value)
  // }, 2000)
}
//设置聚合图层的样式
const setClusterStyle = (feature, type) => {
  var features = feature.get('features')
  var size = features.length
  var style
  if (size == 1) {
    style = [
      new Style({
        image: new Icon({
          src: {
            1: '/static/icon/nav48.png',
            2: '/static/icon/nav55.png',
            3: '/static/icon/nav54.png',
            4: '/static/icon/nav53.png',
            5: '/static/icon/nav52.png',
            6: '/static/icon/nav51.png',
            7: '/static/icon/nav50.png',
            8: '/static/icon/nav49.png'
          }[type],
          anchor: [0.5, 1]
        })
      })
    ]
  } else {
    style = new Style({
      image: new CircleStyle({
        radius: 12,
        stroke: new Stroke({
          color: '#fff'
        }),
        fill: new Fill({
          color: {
            1: '#8c1021',
            2: '#094d51',
            3: '#a77d24',
            4: '#167833',
            5: '#28a2ad',
            6: '#8c1021',
            7: '#a4852f',
            8: '#6043f1'
          }[type]
        })
      }),
      text: new Text({
        font: '12px sans-serif',
        text: size.toString(),
        fill: new Fill({
          color: '#fff'
        })
      })
    })
  }
  return style
}
/*展示聚合点位结束*/
//设施专题公用选中
const facilitiesValue = ref([])
//点击设施专题
const clicFacilities = (type) => {
  const index = facilitiesValue.value.findIndex((item) => item === type)
  if (index === -1) {
    facilitiesValue.value.push(type)
    getFind(type)
  } else {
    facilitiesValue.value.splice(index, 1)
    const index1 = polymerizeLayer.value.findIndex((item) => item.type === type)
    if (index1 !== -1) {
      map.value.removeLayer(polymerizeLayer.value[index1].layer)
      polymerizeLayer.value.splice(index1, 1)
    }
  }
}

//获取设施专题列表
const getFind = (type) => {
  ManageService.getFind(type).then((res) => {
    if (res.data.length > 0) {
      showPoints(res.data, type)
    }
  })
}
// 弹窗容器
const popupCom = ref(null)
const currentCoordinate = ref('') // 弹窗信息
//点击图层控制栏
const checkList = ref(["'高压'", "'次高压'", "'中压'", "'低压'", "'阀门'"])
//点击导航栏
const showNav = ref(false)
const clickNav = (val) => {
  showNav.value === val ? (showNav.value = 0) : (showNav.value = val)
  if (val === 1) {
    lPopShow.value = false
    ExplosionAnalysisVisible.value = false
    QuickQueryVisible.value = false
  }
}
//将地图导出为PNG
const exportPNG = () => {
  map.value.once('rendercomplete', () => {
    var mapCanvas = document.createElement('canvas')
    var size = map.value.getSize()
    mapCanvas.width = size[0]
    mapCanvas.height = size[1]
    var mapContext = mapCanvas.getContext('2d')
    Array.prototype.forEach.call(
      document.querySelectorAll('.ol-layer canvas'),
      function (canvas) {
        if (canvas.width > 0) {
          var opacity = canvas.parentNode.style.opacity
          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity)
          var transform = canvas.style.transform
          // Get the transform parameters from the style's transform matrix
          var matrix = transform
            .match(/^matrix\(([^\(]*)\)$/)[1]
            .split(',')
            .map(Number)
          // Apply the transform to the export map context

          CanvasRenderingContext2D.prototype.setTransform.apply(
            mapContext,
            matrix
          )
          mapContext.drawImage(canvas, 0, 0)
        }
      }
    )
    if (navigator.msSaveBlob) {
      // link download attribuute does not work on MS browsers
      navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png')
    } else {
      var link = document.getElementById('image-download')
      link.href = mapCanvas.toDataURL()
      link.click()
    }
  })
  map.value.renderSync()
}
const getTree = () => {
  // const res = await ManageService.getTree()
  ManageService.getTree().then((res) => {
    data.value = res.data
  })
  // return res
}
const waterLevelVisible = ref(false)
// const waterLevelData = [
//   {
//     locationName: '邵阳市南县县万冲',
//     waterType: '液位计',
//     points: [110.320103360807, 26.3879906290338],
//     height: 30
//     // address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     locationName: '邵阳市南县县罗家港',
//     waterType: '液位计',
//     points: [110.320244137948, 26.3775956285355],
//     height: 45
//     // address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     locationName: '邵阳市南县县吴家团',
//     waterType: '液位计',
//     points: [110.317568331798, 26.3783764919183],
//     height: 80
//     // address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     locationName: '邵阳市南县县勤俭村',
//     waterType: '液位计',
//     points: [110.316724666714, 26.3850851746533],
//     height: 50
//     // address: 'No. 189, Grove St, Los Angeles',
//   }
// ]
const wellWaterName = ref('')
const wellWaterHeight = ref(0)
const waySelect = ref('')
//点击查询分析功能
const clickAnalysis = (type) => {
  if (drawTool.value) drawTool.value.clear()
  waterLevelVisible.value = false
  wayVisible.value = false
  attributeQuery.value = false
  lPopShow.value = false
  if (type === 1) {
    waterLevelVisible.value = true
  } else if (type === 3) {
    // searchWay()
    wayVisible.value = true
  } else if (type === 5) {
    attributeQuery.value = true
  }
}
// let examine = (props) => {
//   wellWaterName.value = props.locationName
//   wellWaterHeight.value = props.height
//   iconMap([props.points[0], props.points[1]])
// }
const iconPointLayer = ref(null)
//地图加载点位标注
const iconMap = (coordinatesArray, tipsArray, isClean) => {
  if (isClean && ExplosionAnalysisLayes.value.dian) {
    map.value.removeLayer(ExplosionAnalysisLayes.value.dian)
    ExplosionAnalysisLayes.value.dian = null
  }
  // 创建一个图标样式
  const iconStyle = new Style({
    image: new Icon({
      src: icon25, // 图标图片路径
      scale: 0.4, // 图标缩放比例
      anchor: [0.5, 1],
      offset: [0, 0] // 图标偏移量
    })
  })
  // 创建标签样式

  // 创建一个数组来存储所有的图标特征
  const iconFeatures = coordinatesArray.map((coordinates, index) => {
    // const iconFeature = new Feature({
    //   geometry: new Point(coordinates) // 图标位置
    // });
    // iconFeature.setStyle(iconStyle); // 为图标设置样式
    // iconFeature.setStyle(labelStyle); // 为标签设置样式
    // return iconFeature; // 返回图标特征
    // 创建图标特征
    const labelStyle = new Style({
      text: new Text({
        text: tipsArray[index], // 默认文本，稍后更新
        font: '14px Calibri,sans-serif',
        fill: new Fill({ color: 'white' }),
        stroke: new Stroke({ color: '#000', width: 0.5 }),
        offsetX: 0,
        offsetY: -46 // 标签相对于图标的偏移量
      })
    })
    const iconFeature = new Feature({
      geometry: new Point(coordinates) // 图标位置
    })
    iconFeature.setStyle(iconStyle) // 为图标设置样式

    // 为标签创建一个新的特征
    const labelFeature = new Feature({
      geometry: new Point(coordinates) // 标签位置与图标相同
    })
    // 设置标签文本
    // labelStyle.getText().setText();
    labelFeature.setStyle(labelStyle) // 为标签设置样式

    return [iconFeature, labelFeature] // 返回包含图标和标签特征的数组
  })
  // 将特征扁平化
  const flatIconFeatures = iconFeatures.flat()
  // 创建一个向量源，用于存储所有图标特征
  const vectorSource = new VectorSource({
    features: flatIconFeatures // 将所有图标特征传递给源
  })

  // 创建一个向量图层，来显示图标特征
  const vectorLayer = new VectorLayer({
    source: vectorSource
  })

  // 如果已有图层，先移除再添加新的图层（可选）
  // if (iconPointLayer.value) {
  //   map.value.removeLayer(iconPointLayer.value);
  //   iconPointLayer.value = null;
  // }

  // 将向量图层添加到地图
  ExplosionAnalysisLayes.value.dian = vectorLayer
  map.value.addLayer(vectorLayer)
}
let wayVisible = ref(false)
let spatialQueryVisible = ref(false)
let loading1 = ref(false)
let treeData = reactive([])
let wayEcharDom = ref('')
let wayEcharDom2 = ref('')
let value = ref(''),
  wayMyChartTop,
  wayMyChartBottom
// let searchWay = () => {
//   loading1.value = true
//   setTimeout(() => {
//     loading1.value = false
//     wayMyChartTop = wayEcharts1(wayEcharDom.value)
//     wayMyChartBottom = wayEcharts2(wayEcharDom2.value)
//     treeData = [
//       {
//         label: '排水',
//         id: 1,
//         children: [
//           {
//             id: 2,
//             label: '雨水管线',
//             children: [
//               {
//                 label: '数据'
//               }
//             ]
//           },
//           {
//             label: '污水管线',
//             children: [
//               {
//                 label: '数据'
//               }
//             ]
//           },
//           {
//             label: '合流管线',
//             children: [
//               {
//                 label: '数据'
//               },
//               {
//                 label: '数据'
//               },
//               {
//                 label: '数据'
//               }
//             ]
//           },
//           {
//             label: '污水管线',
//             children: [
//               {
//                 label: '数据'
//               }
//             ]
//           }
//         ]
//       }
//     ]
//     // mapWay();
//   }, 3000)
// }
const options1 = [
  {
    value: '1',
    label: '城南路'
  }
]
const options2 = [
  {
    value: '1',
    label: '排水'
  },
  {
    value: '2',
    label: '给水'
  },
  {
    value: '3',
    label: '燃气'
  },
  {
    value: '4',
    label: '电力'
  }
]
const options3 = ref([])
const options4 = [
  {
    value: '1',
    label: '管径'
  },
  {
    value: '2',
    label: '埋深'
  },
  {
    value: '3',
    label: '建设单位'
  },
  {
    value: '4',
    label: '所属道路'
  }
]
let attributeQuery = ref(false)
let tableData_length = ref(0)
const attributeForm = ref({
  val1: '',
  val2: '',
  val3: '',
  val4: ''
})
const clickQuery = (type) => {
  if (type === 1) {
    loading1.value = true
    setTimeout(() => {
      var min = 1000
      var max = 10000
      var randomNum = (Math.random() * (max - min) + min).toFixed(2)
      tableData_length.value = randomNum
      tableData_attributeQuery.value = [
        {
          val1: '雨水',
          val2: '南县冷水坪雨水井',
          val3: '冷水坪村',
          val4: '南县市政一队',
          val5: '埋设',
          val6: '水泥',
          val7: '500mm'
        },
        {
          val1: '污水',
          val2: '南县冷水坪污水井',
          val3: '冷水坪村',
          val4: '南县市政一队',
          val5: '埋设',
          val6: '水泥',
          val7: '800mm'
        }
      ]
      loading1.value = false
    }, 3000)
  } else {
    tableData_length.value = 0
    tableData_attributeQuery.value = []
  }
}
let tableData_attributeQuery = ref([])
const changeSelect1 = (val) => {
  if (val === '1') {
    options3.value = [
      {
        value: '1',
        label: '雨水'
      },
      {
        value: '2',
        label: '污水'
      },
      {
        value: '3',
        label: '合流'
      }
    ]
  }
}
const getQueryParams = (url) => {
  const params = {}
  const parser = document.createElement('a')
  parser.href = url

  const query = parser.search.substring(1) // 去掉 '?'
  // if (query) {
  //   setToken(query)
  // }
  const vars = query.split('&')

  vars.forEach(function (v) {
    const pair = v.split('=')
    // 使用 decodeURIComponent 解码
    params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '')
  })

  return params
}
const isEchartsGis = ref('指定区域')
onMounted(() => {
  // initMap()
  const token = sessionStorage.getItem('token')
  if (!token) {
    router.push({ path: '/' })
    ElMessage.error('用户权限验证失败')
    return
  }
  const url = `?${sessionStorage.getItem('xzq')}`
  const paramValue = getQueryParams(url)
  // console.log(paramValue)
  if (!paramValue.sheng) {
    initMap()
    return
  }
  ManageService.getGeom({})
    .then((res) => {
      if (res.code === 200 && res.data) {
        const data = res.data
        mapInfo.value.type = '指定地点'
        if (paramValue.xian === '南县') {
          mapInfo.value.center = [112.3881, 29.3684]
        } else if (paramValue.xian === '临武县') {
          mapInfo.value.center = [112.5603, 25.2775]
        } else if (paramValue.xian === '安乡县') {
          // mapInfo.value.center = [112.5603, 25.2775]
          mapInfo.value.center = [
            data.centre.coordinates[0],
            data.centre.coordinates[1] - 0.04
          ]
          isEchartsGis.value = paramValue.xian
        } else if (paramValue.xian === '衡南县') {
          // mapInfo.value.center = [112.5603, 25.2775]
          mapInfo.value.center = [
            data.centre.coordinates[0],
            data.centre.coordinates[1] - 0.04
          ]
          isEchartsGis.value = paramValue.xian
        } else {
          mapInfo.value.center = [
            data.centre.coordinates[0],
            data.centre.coordinates[1] - 0.04
          ]
        }
        mapInfo.value.bjGeom = data.geom.coordinates
        mapInfo.value.cqFilter = `sheng='${paramValue.sheng}' and shi ='${paramValue.shi}' and xian = '${paramValue.xian}'`
        initMap()
      } else {
        initMap()
      }
    })
    .catch((e) => {
      // initMap()
    })
  // const paramValue = getQueryParams(window.location.href)
  // if (paramValue.sheng && paramValue.shi && paramValue.xian) {
  //   request({
  //     url: '/region/getGeom',
  //     method: 'get',
  //     params: {
  //       ...paramValue
  //     }
  //   })
  //     .then((res) => {
  //       if (res.code == 200 && res.data) {
  //         const data = res.data
  //         mapInfo.value.type = '指定地点'
  //         if (paramValue.xian === '南县') {
  //           mapInfo.value.center = [112.3881, 29.3684]
  //         } else if (paramValue.xian === '临武县') {
  //           mapInfo.value.center = [112.5603, 25.2775]
  //         } else {
  //           mapInfo.value.center = data.centre.coordinates
  //         }
  //         mapInfo.value.bjGeom = data.geom.coordinates
  //         mapInfo.value.cqFilter = `sheng='${paramValue.sheng}' and shi ='${paramValue.shi}' and xian = '${paramValue.xian}'`
  //         initMap()
  //       } else {
  //         removeToken()
  //         initMap()
  //         ElMessage.error('获取指定地点数据错误，已展示默认数据')
  //       }
  //     })
  //     .catch((e) => {
  //       removeToken()
  //       initMap()
  //       ElMessage.error('获取指定地点数据错误，已展示默认数据')
  //     })
  // } else {
  //   removeToken()
  //   initMap()
  // }
})
</script>
<style lang="scss" scoped>
.bottom-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 99999;

  .box-btn-item {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    margin: 20px 0;

    .el-button {
      margin: 0 10px;
    }

    .el-button--primary {
      background: #1d4699;
    }

    .el-button--large {
      --el-button-size: 34px;
      padding: 0px 11px;
    }
  }
}
.check-div-fl {
  bottom: 10%;
  left: 365px;
  z-index: 999;
  position: absolute;
  .clear-btn {
    width: 124px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    border: 1px solid #4081cb;
    background: rgba(2, 53, 123, 0.3);
    border-radius: 8px;
    margin-bottom: 5px;
    cursor: pointer;
    &:hover {
      color: red;
    }
  }
  .check-box {
    padding: 10px 0px 10px 20px;
    border: 2px solid #4081cb;
    border-radius: 8px;
    background: rgba(2, 53, 123, 0.3);
    width: 124px;
    .tips {
      color: #fff;
      font-size: 18px;
    }
  }

  .el-checkbox {
    width: 100%;
    color: #fff;
  }
}
.check-div {
  bottom: 10%;
  right: 365px;
  z-index: 9999;
  position: absolute;

  &.check-div-r {
    right: 20px;
  }

  .check-box {
    padding: 10px 0px 10px 20px;
    border: 2px solid #4081cb;
    border-radius: 8px;
    background: rgba(2, 53, 123, 0.3);
    width: 124px;

    .el-radio-group {
      .el-radio {
        width: 100%;
        color: #fff;
      }
    }
  }

  .check-box1 {
    padding: 10px 0px 10px 20px;
    border: 2px solid #4081cb;
    border-radius: 8px;
    background: rgba(2, 53, 123, 0.3);
    width: 124px;
    margin-top: 10px;

    .el-checkbox {
      width: 100%;
      color: #fff;
    }
  }
}

.demo-tabs-data-statistics {
  .el-tabs__nav-wrap::after {
    display: none !important;
  }
}

.pipline {
  min-width: 431px;
  min-height: 738px;
  background: url('/static/img/icon05.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 1%;
  top: 7%;
  z-index: 333;
  padding: 15px 20px;
  color: #fff;
}

.data_statistics {
  position: absolute;
  left: 1%;
  padding: 15px 20px;
  background: url('/static/icon/icon05.png') no-repeat;
  background-size: 100% 100%;
  color: #fff;
  top: 7%;
  height: 518px;
  width: 431px;
  z-index: 66;
}

.pipline_content {
  background-color: #022435;
  padding: 12px;
}

.pipline_clone img {
  width: 20px;
  cursor: pointer;
  // height: 20px;
}

.Off_valve {
  // padding: 21px 4px !important;
  line-height: 35px;
}

.pipline_content_title {
  color: #86effb;
  font-size: 18px;
  margin-bottom: 12px;
}

.pipline_list,
.list_title,
.list_content {
  display: flex;
  text-align: center;

  img {
    width: 32px;
  }

  > div:nth-child(2) {
    flex: 7;
    border-right: 1px solid #86effb;
    // align-self: center;
  }

  > div:nth-child(1) {
    flex: 1;
  }

  > div {
    border-left: 1px solid #86effb;
    border-bottom: 1px solid #86effb;
    padding: 12px 25px;
    text-wrap: nowrap;
  }
}

.Radius {
  width: 100%;
  display: flex;
  height: 60px;
  justify-content: space-between;

  img {
    width: 60px;
    cursor: pointer;
    // width: 60px;
  }
}

.pipline_list:first-child > div,
.list_title:first-child > div {
  // background-color: red !important;
  border-top: 1px solid #86effb !important;
}

.pipline_title,
.data_statistics_title {
  display: flex;
  font-size: 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid #1888ff;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 56px;
}

.list_content > div:last-child,
.list_title > div:last-child {
  border-right: 1px solid #86effb;
}

.data_statistics_title {
  margin-bottom: 5px !important;
}

.list_title > div,
.list_content > div {
  width: 40% !important;
  flex: unset !important;
}

.list_content > div:first-child,
.list_title > div:first-child {
  width: 20% !important;
}

.derive {
  display: flex;
  justify-content: end;
  margin-top: 15px;

  .el-button {
    padding-left: 30px !important;
    padding-right: 30px !important;
    border-radius: 0 !important;
    background-color: #2d68f7 !important;
    border-color: #2d68f7;
  }
}

.data_statistics_content {
  padding: 10px;
  background: #022435;
  margin-top: 16px;
}

.data_statistics p {
  margin: 10px 0;
  color: #86effb !important;
  font-size: 16px;
}

.demoimg {
  position: absolute;
  left: 3%;
  top: 5%;
  z-index: 333;
}

@font-face {
  font-family: 'ysbth';
  src: url('/static/ttf/ysbth.TTF');
  font-weight: normal;
  font-style: normal;
}

.popupCom-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  padding-bottom: 11px;
  // border-bottom: 1px solid #1888ff;
  color: rgb(24, 144, 255);

  .popupCom-top_title {
    font-size: 18px;
    font-weight: 800;
    font-family: ysbth;
  }

  .popupCom-top_close {
    font-size: 18px;
    position: absolute;
    color: #999;
    right: 20px;
    cursor: pointer;
  }
}

.popupCom-con {
  display: flex;

  .fl {
    font-size: 12px;
    height: 320px;
    width: 220px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, and Opera */
    }
    table {
      table-layout: fixed;
    }
    table,
    table tr th,
    table tr td {
      height: 30px;
    }
    table td:last-child {
      width: 100px; /* 固定宽度 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 超出内容隐藏 */
      text-overflow: ellipsis; /* 超出部分用省略号表示 */
      // border: 1px solid #000; /* 添加边框使表格更加清晰 */
      padding: 8px; /* 内边距 */
    }
    table td:first-child {
      text-align: right;
      padding-right: 10px;
    }
  }

  .fr {
    width: calc(100% - 220px);
    height: 320px;

    .chart-wrapper {
      width: 100%;
      height: 100%;
    }
  }
}

// .popup {
//   color: #fff !important;
// }

.ol_body {
  width: 100%;
  height: 100%;

  .r_nav {
    position: absolute;
    z-index: 1999;
    right: 20px;
    top: 10px;
    display: flex;
    font-size: 20px;
    font-weight: bold;

    > div {
      cursor: pointer;
    }

    .item {
      background: url('/static/icon/nav_bj.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
      width: 140px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-radius: 6px;
      margin-left: 10px;
      box-sizing: border-box;

      &:hover {
        background: url('/static/icon/nav_bj_hover.png') no-repeat;
        color: #80fdea;
      }

      &.active {
        background: url('/static/icon/nav_bj_hover.png') no-repeat;
        color: #80fdea;
      }
    }
  }

  .shade_box {
    background: url(/static/img/k.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 60px;
    right: 10px;
    z-index: 6;
    padding: 5px;
    color: #80fdea;
    padding: 6px;

    .con {
      background-color: #0a163cc9;
      border: 2px solid #80eeff;
      width: 320px;
      height: 440px;
      overflow: hidden;
      overflow-y: scroll;

      /*滚动条样式*/
      &::-webkit-scrollbar {
        width: 0;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
      }

      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }

      .item {
        padding: 5px 2px 0;

        .title {
          height: 25px;
          border-bottom: 2px solid #80fdea;
          font-weight: 600;
          font-size: 15px;
          color: #fff;
          margin-bottom: 10px;
        }

        .box {
          display: flex;
          flex-wrap: wrap;

          .box_i {
            width: 25%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            cursor: pointer;
            margin-bottom: 5px;

            .img {
              // border: 1px solid #80eeff;
              border-radius: 3px;
              line-height: 0;
              position: relative;

              &.underlay_active::after,
              &.facilities_active::after {
                position: absolute;
                width: 100%;
                content: '\2713';
                color: #fff;
                bottom: 0px;
                left: 0;
                height: 14px;
                font-size: 12px;
                line-height: 14px;
                text-align: center;
                background-color: #00c69f;
                border-radius: 0 0 5px 5px;
              }

              img {
                width: 60px;
                height: 58px;
              }
            }

            span {
              font-size: 13px;
              display: block;
              width: 100%;
              text-align: center;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }

  #mapDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
}

.key_box {
  position: absolute;
  z-index: 99;
  bottom: 48px;
  right: 10px;
  border-radius: 5px;
  background-color: #0a163cc9;
  width: 120px;
  // height: 100px;
  font-size: 14px;
  padding: 10px 0;

  .item {
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 5px;

    // gap: 26px;
    img {
      width: 22px;
      height: 20px;
    }
  }
}

.map_tool {
  position: absolute;
  z-index: 99;
  right: 10px;
  bottom: 48px;
  // background-color: rgba(128, 128, 128, 0.25);
  width: 40px;
  border-radius: 5px;
  background-color: #0a163cc9;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2px 0;

  .item {
    width: 40px;
    height: 34px;
    // background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    cursor: pointer;
    margin: 1px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }

    img {
      width: 31px;
      height: 31px;
    }
  }
}

.map_btn {
  position: absolute;
  bottom: 30px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 99;
  left: calc(50% - 40px);
  text-align: center;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.popup {
  width: 600px;
  // height: 100px;
  background: #fff;
  // background-size: 100% 100%;
  position: absolute;
  top: 10px;
  left: -300px;
  box-sizing: border-box;
  padding: 15px 20px;
  font-size: 13px;
  // min-height: 400px;
  user-select: none;
  border-radius: 4px;
  border: 1px solid #1890ff;
  color: #000;

  .title {
    background: url(/static/img/icon02.png) no-repeat;
    width: 280px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-size: 100% 100%;
    margin: 0 auto 0;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

  .icon-close {
    position: absolute;
    top: 3px;
    right: 8px;
    cursor: pointer;
  }

  .nav {
    display: flex;
    // justify-content: center;
    margin-top: 12px;

    .item {
      font-size: 14px;
      font-weight: 400;
      // padding: 10px;
      width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-right: 12px;
      cursor: pointer;
      background: url(/static/icon/pointTab.png) no-repeat;
      background-size: 100% 100%;

      &.active {
        // background: url(/static/icon/pointTab.png) no-repeat;
        color: #00ffff;
      }

      // &:hover {
      //   // background: url(/static/icon/pointTab.png) no-repeat;
      //   // background-size: 100% 100%;
      // }
    }
  }

  .content {
    margin-top: 15px;
    // padding: 0 20px;
    // display: grid;
    // grid-template-columns: 1.2fr 1fr;
    // grid-row-gap: 6px;
    // > div:nth-child(even) {
    //   // justify-self: flex-start;
    //   background-color: red;
    // }
    // > div:nth-child(odd) {
    //   // justify-self: flex-end;
    //   // text-align: right;
    // }
    // > div {
    //   margin-bottom: 5px;
    // }

    .jcjl {
      .jcjl_title {
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .item {
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .r {
          // color: #cb2226;
          color: #42c4fc;
          text-decoration: underline;
        }
      }
    }
  }
}

.measure_box {
  height: 100%;

  .title {
    color: #006600;
    border-bottom: 2px solid #ccc;
    padding: 3px 2px;
    display: none;
  }

  .el-tree {
    background: transparent;
    // color: #686868;

    :deep(.el-tree-node__content:hover) {
      background-color: transparent;
    }

    :deep(.el-tree-node:focus > .el-tree-node__content) {
      background-color: transparent;
    }
  }

  :deep(.el-tabs) {
    .el-tabs__header {
      border: 1px solid #1da0dd;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .el-tabs__nav {
      width: 100%;
    }

    .is-active {
      color: #0026ff !important;
    }

    .el-tabs__item {
      color: #fff !important;
      text-align: center;
      padding: 0;
      width: 50%;
      height: 30px;
      line-height: 30px;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__active-bar {
      // display: none;
      height: 100%;
      border: 1px solid #1da0dd;
      border-radius: 5px;
      box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.2);
      background-color: transparent;
    }
  }

  .box {
    display: flex;
    height: calc(100% - 80px);
    // width: 480px;

    .l {
      width: 180px;
      height: 100%;
      overflow: hidden;
      overflow-y: scroll;
      border-right: 2px solid #1a6193;
      margin-right: 10px;
      /* 隐藏滚动条 */
      scrollbar-width: none;
      /* firefox */
      -ms-overflow-style: none;

      /* IE 10+ */
      &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
      }
    }

    .r {
      width: 300px;
      padding-right: 10px;

      .demo-tabs {
        .pane-info {
          color: #fff !important;

          .echarts {
            height: 200px;
            margin: 30px 0;

            > div {
              height: 100%;
            }
          }
        }
      }
    }
  }

  .con {
    .item {
      display: flex;
      gap: 26px;

      .tool {
        margin: 5px;
        cursor: pointer;

        img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}

.left_top {
  position: absolute;
  width: 10%;
  height: 4rem;
  left: 0;
  top: 0;
  background: url(@/assets/icon/horn_1@2x.53e4f138.png) no-repeat;
  background-size: 100% 100%;
}

.left_bottom {
  position: absolute;
  width: 10%;
  height: 4rem;
  left: 0;
  bottom: 0;
  background: url(@/assets/icon/horn_3@2x.9b6e2561.png) no-repeat;
  background-size: 100% 100%;
}

.right_top {
  position: absolute;
  width: 10%;
  height: 4rem;
  right: 0;
  top: 0;
  background: url(@/assets/icon/horn_2@2x.1a3dfd48.png) no-repeat;
  background-size: 100% 100%;
}

.right_bottom {
  position: absolute;
  width: 10%;
  height: 4rem;
  right: 0;
  bottom: 0;
  background: url(@/assets/icon/horn_4@2x.c2461a2d.png) no-repeat;
  background-size: 100% 100%;
}

.left_info {
  position: absolute;
  width: 32px;
  height: 80%;
  left: 0;
  top: 10%;
  background: url(@/assets/icon/border_left@2x.3fd190de.png) no-repeat;
  background-size: 100% 100%;
}

.right_info {
  position: absolute;
  width: 32px;
  height: 80%;
  top: 10%;
  right: 0;
  background: url(@/assets/icon/border_right@2x.4fc15558.png) no-repeat;
  background-size: 100% 100%;
}

.btm_info {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 99;
  height: 50px;
  line-height: 50px;
  // background-color: rgba(0, 0, 0, 0.5);
  background: url(@/assets/icon/border_bottom@2x.f8232c9a.png) no-repeat;
  background-size: 100% 100%;

  #mouse-position {
    float: right;
    width: fit-content;
    color: #cec9bf;
    margin-right: 20px;
  }
}

.ol-zoom {
  display: none;
}

.search {
  position: absolute;
  left: 20px;
  top: 50px;
  z-index: 200;
  width: 350px;

  .mt-4 {
    background-color: #0a163cc9;
    border: 1px solid #80eeff;
  }

  .el-input-group--append > .el-input__wrapper,
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: transparent;
  }

  .el-input-group__append,
  .el-input__wrapper {
    box-shadow: none;
  }

  .el-button [class*='el-icon'] svg {
    color: #99f7ff;
  }

  .el-input__inner {
    color: #fff;
  }

  .box {
    height: 370px;
    background-color: #0a163cc9;
    border: 1px solid #80eeff;
    color: #80eeff;
    box-shadow: rgba(187, 201, 208, 0.74) 1px 3px 3px;
    margin-top: 5px;
    overflow: hidden;
    overflow-y: scroll;

    .item {
      padding: 10px;

      .t {
        color: #def912;
        font-size: 14px;
        margin-bottom: 5px;
      }

      .b {
        font-size: 13px;
        padding-left: 10px;
      }

      &:hover {
        background-color: #0a163c;
        cursor: pointer;
      }
    }
  }
}

.map {
  :deep(.ol-zoom) {
    top: auto;
    left: auto;
    bottom: 70px;
    right: 20px;
    display: none;
  }

  :deep(.ol-scale-line) {
    bottom: 0;
    background: transparent;
    z-index: 99;

    .ol-scale-line-inner {
      color: #cec9bf;
      border: 1px solid #cec9bf;
      border-top: none;
    }
  }

  #swipeContainer {
    position: absolute;
    opacity: 0.8;
    width: 0.625rem;
    height: 100%;
    top: 0;
    left: 50%;
    background-color: rgba(50, 50, 50, 0.75);
    cursor: col-resize;
    z-index: 2;
  }

  #swipeContainer:hover {
    opacity: 0.5;
  }

  #swipeDiv {
    border: solid 0.5px #ffffff;
    height: 100%;
    width: 0px;
    margin: 0 auto;
  }

  #swipeDiv .handle {
    width: 51px;
    height: 24px;
    margin-top: -12px;
    margin-left: -20px;
    top: 50%;
    left: 0;
    position: absolute;
    z-index: 30;
    font-family: 'SimHei';
    speak-as: none;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-indent: 0;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: black;
    color: white;
    opacity: 0.6;
  }

  *,
  *:before,
  *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .handle:before {
    margin: 0 18px 0 5px;
    content: '\0399\0399\0399';
    width: 20px;
    height: 24px;
    line-height: 2;
  }

  :deep(.ol-tooltip) {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 14px 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
    font-size: 12px;
  }

  :deep(.ol-tooltip-measure) {
    opacity: 1;
    font-weight: bold;
  }

  :deep(.ol-tooltip-static) {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
  }

  :deep(.ol-tooltip-measure:before),
  :deep(.ol-tooltip-static:before) {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: '';
    position: absolute;
    bottom: -6px;
    margin-left: -5px;
    left: 50%;
  }

  :deep(.ol-tooltip-static:before) {
    border-top-color: #ffcc33;
  }

  //测面、测距的样式
  :deep(.tooltip-close-btn) {
    font-style: normal;
    position: absolute;
    color: #2d8cf0;
    right: 0px;
    top: -7px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;

    &:hover {
      color: #fff;
    }
  }
}

.waterLevel {
  position: absolute;
  left: 1%;
  top: 80px;
  width: 500px;
  z-index: 33;
  // background-color: red;
  background: rgba(0, 0, 36, 0.7608);
  border-radius: 10px 10px 0% 0%;

  .waterLevel-top {
    color: #fff;
    display: flex;
    padding: 10px;
    justify-content: space-between;
    border-radius: 10px 10px 0% 0%;
    background-color: #113397;
  }

  .water {
    width: 98%;
    margin-left: 0.7px;
    height: 70px;
    position: absolute;
    // background-color: red;
    border-radius: 5% 5% 0% 0%;
    // bottom: 0%;
    bottom: 0%;
    transition: height 1s;
    // margin-top: 90px;
    background-image: linear-gradient(
      to top,
      #3dace8 0%,
      #4eb3ea 50%,
      #91d1f4 100%
    );
  }

  .waterBody {
    position: absolute;
    height: 114px;
    width: 35px;
    // background-color: red;
    overflow: hidden;
    transition: height 1s;
    left: 46.5%;
    top: 17%;
    // transform: translate(-50%, -50%);
    // transform: rotateX(45deg);
    // transition: height 0.5s ease;
    // background-color: blue;
  }

  .waterbj-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10%);
    top: 10%;
    color: #fff;
  }

  .waterbj-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 10%);
    top: 10%;
    color: #fff;
  }

  .water-text {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
  }

  .waterbj {
    height: 200px;
    background: url(/static/img/waterbj2.png) no-repeat center;
    // background-size: 100% 100%;
    position: relative;
  }
}

.el-table__cell {
  border-bottom: 1px solid #86effb !important;
  border-left: 1px solid #86effb;
  border-top: 1px solid #86effb;
}

.el-table__inner-wrapper {
  border-right: 1px solid #86effb !important;
  border-bottom: 1px solid #86effb !important;
}

.el-table {
  background-color: transparent !important;
}

.el-table tr,
.el-table th.el-table__cell {
  // background-color: #052634 !important;
  background-color: transparent !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent !important;
}

.cell {
  color: #fff !important;
  white-space: nowrap !important;
  padding: 0 13px !important;
}

.el-table thead {
  color: #fff !important;
}

.wayEcharDom {
  width: 100%;
  height: 200px;
}

.wayEcharDom:nth-child(2) {
  margin-top: 20px;
}

.way-btn {
  margin-left: 15px;
}

.way-control {
  margin: 17px 0;

  > span {
    margin-right: 10px;
  }
}

.endlongInput-top,
.way-top {
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding-bottom: 8px;
  border-bottom: 2px solid #1888ff;
}

.way {
  position: absolute;
  left: 20px;
  top: 70px;
  z-index: 33;
  background: url('/static/img/icon04.png') no-repeat;
  background-size: 100% 100%;
  // height: 579px;
  width: 431px;
  padding: 17px;
  color: #fff;
}

.way-list {
  display: flex;
  gap: 15px;

  > div {
    background: rgba(2, 36, 53, 0.8);
    padding: 12px;
  }

  > div:nth-child(1) {
    flex: 1;
  }

  > div:nth-child(2) {
    flex: 2;
  }
}

.el-tree {
  background: transparent;
  color: #fff;
}

.attributeQuery-list {
  margin-top: 15px;
}

.attributeQuery-btn {
  text-align: right;
  margin-top: 15px;
}

.attributeQuery-result {
  background: rgba(2, 36, 53, 0.8);
}

.attributeQuery-result-top {
  > div:nth-child(1) {
    padding-bottom: 8px;
    border-bottom: 1px dashed #86effb;
  }

  > div:nth-child(2) {
    display: flex;
    padding-top: 8px;
    justify-content: space-between;
  }

  span {
    color: #86effb;
    cursor: pointer;
  }

  span:nth-child(1) {
    margin-right: 15px;
  }
}

.attributeQuery {
  color: #fff;
}

.dialogM,
.attributeQuery {
  // pointer-events: none;
  // width: 0px;
  // height: 0px;
  // z-index: 0 !important;
  position: absolute;
  z-index: 22;
  top: 25%;
  width: 1000px;
  padding: 15px;
  background: url(/static/img/pomianbj.png) no-repeat !important;
  background-size: 100% 100% !important;
  left: 10px;
}

.attributeQuery-control {
  padding-bottom: 20px;
  border-bottom: 1px dashed #86effb;
}

.attributeQuery {
  width: 634px !important;
  top: 70px;
}

.attributeQuery-control {
  > div {
    margin-top: 15px;
  }

  // span {
  //   margin-right: 2px;
  // }
}

.span-left {
  margin-right: 15px;
}

.span-right {
  margin: 0 15px;
}

.Please-input {
  width: 220px;
}

.span-right2 {
  margin-right: 30px;
}

.el-tabs__item {
  color: #fff;
}

.el-tree {
  background: transparent !important;

  .el-tree-node__content:hover,
  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent !important;
  }

  .el-checkbox__inner {
    background-color: #16252e;
  }
}

:deep(.blueLayer) {
  // filter: grayscale(68%) invert(170%) sepia(0%) hue-rotate(215deg) saturate(311%) brightness(42%) contrast(91%);
  filter: grayscale(100%) invert(74%) sepia(206%) hue-rotate(160deg)
    saturate(865%) brightness(39%) contrast(107%);
}

:deep(.notes) {
  filter: grayscale(70%) invert(82%) sepia(0%) hue-rotate(200deg) saturate(113%)
    brightness(155%) contrast(174%);
}
</style>
<style scoped>
.content span {
  width: 95px;
  display: inline-block;
}

.content > div {
  margin-bottom: 5px;
}

:deep(.el-tree-node__label) {
  color: #fff !important;
}

#context3 {
  width: 100%;
  height: 92%;
  position: relative;
  border: 1px solid #385fe0;
  box-sizing: border-box;
  margin-top: 16px;
  margin-right: 16px;
}

.gaocheng {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #385fe0;
  color: #385fe0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mid-cir {
  width: 100px;
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  height: 200px;
  border: 2px solid rgb(56, 54, 54);
  background-color: rgba(136, 135, 135, 0.76);
  border-top: none;
  border-bottom: none;
  box-shadow: -10px -10px 30px rgb(56, 54, 54) inset;
}

.mid-bottom {
  position: absolute;
  bottom: -26px;
  width: 100%;
  height: 50px;
  background-color: rgb(145, 145, 145);
  border: 2px solid rgb(56, 54, 54);
  -box-sizing: border-box;
  -o-border-radius: 100%;
  -ms-border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: -10px -10px 30px rgb(56, 54, 54) inset;
}

.left-cir,
.right-cir {
  height: 40px;
  width: 98px;
  position: absolute;
  top: 150px;
  border: 2px solid #000;
  border-right: none;
  border-left: none;
  background-color: rgb(15, 13, 13);
}

.left-cir {
  left: 20px;
  box-shadow: 0px 1px 4px rgb(46, 44, 44) inset;
}

.right-cir {
  right: 20px;
  box-shadow: 1px 0px 4px rgb(46, 44, 44) inset;
}

.left-bottom,
.right-bottom {
  height: 100%;
  width: 20px;
  position: absolute;
  border: 2px solid #000;
  background-color: rgb(56, 54, 54);
  -o-border-radius: 100%;
  -ms-border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.left-bottom {
  left: -12px;
}

.right-bottom {
  right: -12px;
}

.mid-line {
  position: absolute;
  right: -6px;
  height: calc(100% + 16px);
  top: 2px;
  border-right: 1px solid rgb(238, 199, 28);
}

.left-line,
.right-line {
  position: absolute;
  height: 104px;
  top: 44px;
  border-right: 1px solid rgb(231, 159, 3);
}

.left-line {
  left: 100px;
}

.right-line {
  right: 100px;
}

.left-line::before,
.mid-line::before,
.right-line::before {
  content: '';
  width: 8px;
  height: 1px;
  border-bottom: 1px solid rgb(231, 159, 3);
  position: absolute;
  top: -2px;
  left: -4px;
}

.mid-line::before {
  border-bottom: 1px solid rgb(238, 199, 28);
}

.mid-line::after,
.left-line::after,
.right-line::after {
  content: '';
  width: 8px;
  height: 1px;
  border-bottom: 1px solid rgb(238, 199, 28);
  position: absolute;
  bottom: -2px;
  left: -4px;
}

.mid-line::after {
  border-bottom: 1px solid rgb(238, 199, 28);
}

.right-shen,
.left-shen,
.mid-shen {
  position: absolute;
}

.right-shen,
.left-shen,
.mid-shen {
  top: 50%;
  transform: translate(-50%);
  width: 100px;
  left: 56px;
  color: rgb(238, 199, 28);
}

.left-shen {
  left: 0px;
}

.mid-shen {
  left: -20px;
}

.left-caliber,
.right-caliber {
  color: #999;
  font-size: 12px;
  text-align: center;
  line-height: 40px;
  position: relative;
}

.left-caliber::before {
  content: 'T';
  color: #999;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -14px;
}

.left-caliber::after {
  content: 'T';
  color: #999;
  position: absolute;
  left: 47%;
  transform: translateX(-50%);
  bottom: -14px;
  transform: rotate(180deg);
}

.right-line:hover,
.left-line:hover {
  text-shadow: 0px 0px 26px #fff;
}

.right-line:hover.right-line,
.left-line:hover.left-line {
  box-shadow: 0px 0px 16px #fff;
}

.mid-cir:hover,
.mid-cir:hover.mid-line {
  box-shadow: 0px 8px 26px #fff;
  text-shadow: 0px 0px 16px #fff;
}

.mid-cir:hover.mid-bottom {
  box-shadow: 0px 4px 6px #fff;
}

.right-cir:hover,
.left-cir:hover {
  box-shadow: 0px 0px 6px #fff;
  text-shadow: 0px 0px 6px #fff;
}

.right-m p,
.left-m p {
  margin: 0;
  line-height: 26px;
  color: #da5a10;
}

.right-m,
.left-m {
  position: absolute;
  top: 70px;
  text-align: right;
}

.right-m {
  right: 10px;
}
</style>
